<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-button type="primary" icon="el-icon-search" @click="dialogFormVisible = true">查询</el-button>

    <el-button
      type="success"
      @click="chooseInfo"
      style="float: right; margin-right: 10px"
      v-show="isAddCode"
    >确定</el-button>

    <el-popover
      placement="bottom"
      style="margin-left:20px"
      width="300"
      trigger="manual"
      v-model="visible"
    >
      <el-button type="primary">配货出库</el-button>
      <el-button type="primary">门店调拨</el-button>
      <el-button slot="reference" @click="visible = !visible">批量出库</el-button>
    </el-popover>

    <el-dialog title="查询条件" :visible.sync="dialogFormVisible" width="80%" center>
      <!-- <el-form :model="form">
        <div class="chaxun">
          单据编号:<el-input v-model="input" placeholder="请输入单据编号" style="width:25%" ></el-input>
          商品编码:<el-input v-model="input" placeholder="请输入商品编码" style="width:25%" margin="10px"></el-input>
          商品名称:<el-input v-model="input" placeholder="请输入商品名称" style="width:25%" margin="10px"></el-input>
        </div>
        <div>
          商品手寸:<el-input v-model="input" placeholder="请输入商品手寸" style="width: 25%" margin="10px"></el-input>
          磨具号:<el-input v-model="input" placeholder="请输入磨具号" style="width: 25%" margin="10px"></el-input>
          款号:<el-input v-model="input" placeholder="请输入款号" style="width: 25%" margin="10px"></el-input>
        </div>
        <div>
          证书号:<el-input v-model="input" placeholder="请输入证书号" style="width:25%" margin="10px"></el-input>
          进度<el-select v-model="form.region" >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        </div>
      </el-form>-->
      <el-form :model="form" :inline="true">
        <div style="margin-top:20px">
          <span style="width:30%;margin-left:50px">
            单据编号:
            <el-input v-model="form.inputDanjubianhao" placeholder="请输入单据编号" style="width:19%"></el-input>
          </span>
          <span style="width:30%;margin-left:50px">
            商品编码:
            <el-input v-model="form.inputShangpinbanma" placeholder="请输入商品编码" style="width:19%"></el-input>
          </span>
          <span style="width:30%;margin-left:50px">
            商品名称:
            <el-input v-model="form.inputShangpinmingcheng" placeholder="请输入商品名称" style="width:19%"></el-input>
          </span>
        </div>
        <div style="margin-top:20px">
          <span style="width:30%;margin-left:50px">
            商品手寸:
            <el-input v-model="form.inputShoucun" placeholder="请输入商品手寸" style="width: 19%"></el-input>
          </span>
          <span style="width:30%;margin-left:50px">
            模具号:
            <el-input v-model="form.inputMojuhao" placeholder="请输入模具号" style="width: 19%"></el-input>
          </span>
          <span style="width:30%;margin-left:70px">
            款号:
            <el-input v-model="form.inputZuanhao" placeholder="请输入款号" style="width: 19%"></el-input>
          </span>
        </div>
        <div style="margin-top:20px">
          <span style="width:30%;margin-left:50px">
            证书编号:
            <el-input v-model="form.inputZhengshubianhao" placeholder="请输入证书号" style="width:19%"></el-input>
          </span>
          <span style="width:30%;margin-left:50px">
            <el-form-item label="净度：">
              <el-select v-model="form.form_jingdu" placeholder="请选择净度">
                <el-option label="净度1" value="jingdu1"></el-option>
                <el-option label="净度2" value="jingdu2"></el-option>
                <el-option label="净度3" value="jingdu3"></el-option>
                <el-option label="净度4" value="jingdu4"></el-option>
              </el-select>
            </el-form-item>
          </span>

          <span style="width:30%;margin-left:50px">
            <el-form-item label="颜色：">
              <el-select v-model="form.form_yanse" placeholder="请选择颜色">
                <el-option label="颜色1" value="color1"></el-option>
                <el-option label="颜色2" value="color2"></el-option>
              </el-select>
            </el-form-item>
          </span>
        </div>
        <div style="margin-top:20px">
          <span style="width:30%;margin-left:50px">
            <el-form-item label="门店名称：">
              <el-select v-model="form.form_mendianmingcheng" placeholder="请选择门店名称">
                <el-option label="北京总部" value="beijingZB"></el-option>
                <el-option label="望京分店" value="wangjingFD"></el-option>
                <el-option label="王府井分店" value="wangfujingFD"></el-option>
              </el-select>
            </el-form-item>
          </span>

          <span style="width:30%;margin-left:50px">
            <el-form-item label="来源：">
              <el-select v-model="form.form_laiyuan" placeholder="请选择来源">
                <el-option label="采购" value="caigou"></el-option>
                <el-option label="加工" value="jiagong"></el-option>
                <el-option label="联销" value="lianxiao"></el-option>
                <el-option label="代销" value="daixiao"></el-option>
                <el-option label="其他" value="qita"></el-option>
              </el-select>
            </el-form-item>
          </span>
          <span style="width:30%;margin-left:50px">
            <el-form-item label="品牌：">
              <el-select v-model="form.form_pinpai" placeholder="请选择品牌">
                <el-option label="爱迪尔" value="aidier"></el-option>
                <el-option label="供应商" value="gongyingshang"></el-option>
              </el-select>
            </el-form-item>
          </span>
        </div>

        <div style="margin-top:20px">
          <span style="width:30%;margin-left:50px">
            <el-form-item label="价格类型：">
              <el-select v-model="form.form_jiageleixing" placeholder="请选择价格类型">
                <el-option label="一口价" value="yikoujia"></el-option>
                <el-option label="特价" value="tejia"></el-option>
              </el-select>
            </el-form-item>
          </span>

          <span style="width:30%;margin-left:50px">
            <el-form-item label="珠宝类型">
              <el-select v-model="form.form_zhubaofenlei" placeholder="请选择分类">
                <el-option label="黄金类" value="huangjin"></el-option>
                <el-option label="钻石类" value="zuanshi"></el-option>
                <el-option label="玉器类" value="yuqi"></el-option>
              </el-select>
            </el-form-item>
          </span>

          <span style="width:30%;margin-left:30px">
            <el-form-item label="商品类型：">
              <el-select v-model="form.form_shangpinleixing" placeholder="请选择类型">
                <el-option label="K金类" value="Kjin"></el-option>
                <el-option label="金镶玉" value="jinxiangyu"></el-option>
                <el-option label="其他标价类" value="qitabiaojia"></el-option>
                <el-option label="素金类" value="sujin"></el-option>
                <el-option label="投资类" value="touzi"></el-option>
              </el-select>
            </el-form-item>
          </span>
        </div>
        <div style="margin-top:20px">
          标签价范围：
          <el-input-number
            v-model="form.num_a1"
            controls-position="right"
            @change="handleChange"
            :min="1"
          ></el-input-number>——
          <el-input-number
            v-model="form.num_a2"
            controls-position="right"
            @change="handleChange"
            :min="2"
          ></el-input-number>单位（元）
          重量范围：
          <el-input-number
            v-model="form.num_b1"
            controls-position="right"
            @change="handleChange"
            :min="1"
          ></el-input-number>——
          <el-input-number
            v-model="form.num_b2"
            controls-position="right"
            @change="handleChange"
            :min="2"
          ></el-input-number>单位（克）
        </div>
        <div style="margin-top:20px">
          主石范围：
          <el-input-number
            v-model="form.num_c1"
            controls-position="right"
            @change="handleChange"
            :min="1"
          ></el-input-number>——
          <el-input-number
            v-model="form.num_c2"
            controls-position="right"
            @change="handleChange"
            :min="2"
          ></el-input-number>单位（分）
          库龄范围：
          <el-input-number
            v-model="form.num_d1"
            controls-position="right"
            @change="handleChange"
            :min="1"
          ></el-input-number>——
          <el-input-number
            v-model="form.num_d2"
            controls-position="right"
            @change="handleChange"
            :min="2"
          ></el-input-number>单位（年）
        </div>
        <div style="margin-top:20px">
          选择商品类目：
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="margin-top:20px">
          <el-form-item label=" 款式：" prop="kuanshi">
            <el-select v-model="form.formInline.kuanshi" placeholder="请选择款式">
              <el-option label="项链" value="xianglian"></el-option>
              <el-option label="挂坠" value="guazhui"></el-option>
              <el-option label="耳环" value="erhuan"></el-option>
              <el-option label="戒指" value="jiezhi"></el-option>
              <el-option label="手镯" value="shouzhuo"></el-option>
              <el-option label="扳指" value="banzhi"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 成色:" prop="chengse">
            <el-select v-model="form.formInline.chengse" placeholder="请选择成色">
              <el-option label="优质" value="youzhi"></el-option>
              <el-option label="有瑕疵" value="youxiaci"></el-option>
              <el-option label="非常好" value="feichanghao"></el-option>
              <el-option label="普通" value="putong"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" 属性：" prop="shuxing">
            <el-select v-model="form.formInline.shuxing" placeholder="请选择属性">
              <el-option label="18k金" value="shibaKjin"></el-option>
              <el-option label="千足金" value="qianzujin"></el-option>
              <el-option label="24k金" value="ershisiKjin"></el-option>
              <el-option label="玉石" value="yushi"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label=" 主石：" prop="zhushi">
            <el-select v-model="form.formInline.zhushi" placeholder="请选择主石">
              <el-option label="钻石" value="zuanshi"></el-option>
              <el-option label="红宝石" value="hongbaoshi"></el-option>
              <el-option label="锆石" value="gaoshi"></el-option>
              <el-option label="水晶" value="shuijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动区域"></el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisibles">确认查询</el-button>
        <el-button @click="dialogFormVisibles">取 消</el-button>
      </div>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="goodsList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="行号" label="行号"></el-table-column>
      <el-table-column prop="总部名称" label="总部名称"></el-table-column>
      <el-table-column prop="柜台名称" label="类库/柜台"></el-table-column>
      <el-table-column prop="首饰编码" label="首饰编码"></el-table-column>
      <el-table-column prop="含金量" label="含金量"></el-table-column>
      <el-table-column prop="金净重" label="金净重"></el-table-column>
      <el-table-column prop="主石重" label="主石重"></el-table-column>
      <el-table-column prop="副石重" label="副石重"></el-table-column>
      <el-table-column prop="总重" label="总重"></el-table-column>
      <el-table-column prop="成本单价" label="成本单价"></el-table-column>
      <el-table-column prop="系数" label="系数"></el-table-column>
      <el-table-column prop="标签单价" label="标签单价"></el-table-column>
      <el-table-column prop="标签总价" label="标签总价"></el-table-column>
      <el-table-column prop="销售工费" label="销售工费"></el-table-column>
      <el-table-column prop="销售附加费" label="销售附加费"></el-table-column>
      <el-table-column prop="价格类型" label="价格类型"></el-table-column>
      <el-table-column prop="证书号" label="证书号"></el-table-column>
      <el-table-column prop="手寸" label="手寸"></el-table-column>
      <el-table-column prop="净度" label="净度"></el-table-column>
      <el-table-column prop="颜色" label="颜色"></el-table-column>
      <el-table-column prop="切工" label="切工"></el-table-column>
      <el-table-column prop="荧光" label="荧光"></el-table-column>
      <el-table-column prop="模具号" label="模具号"></el-table-column>
      <el-table-column prop="款号" label="款号"></el-table-column>
      <el-table-column prop="供应商" label="供应商"></el-table-column>
      <el-table-column prop="入库时间" label="入库时间"></el-table-column>
      <el-table-column prop="分类1" label="分类1"></el-table-column>
      <el-table-column prop="分类2" label="分类2"></el-table-column>
      <el-table-column prop="别名1" label="别名1"></el-table-column>
      <el-table-column prop="别名2" label="别名2"></el-table-column>
      <el-table-column prop="成色" label="成色"></el-table-column>
      <el-table-column prop="系列" label="系列"></el-table-column>
      <el-table-column prop="门店名称" label="门店名称"></el-table-column>
      <el-table-column prop="柜台" label="柜台"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1,5, 10, 20]"
      :page-size="5"
      background
      layout="sizes, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { selectMainAll } from "@/http/inventoryStatisticsApi";
// import { selectFenAll } from "@/http/inventoryStatisticsApi";
const cityOptions = ["素金类", "镶嵌类", "玉石类", "金镶玉类"];
export default {
  name: "InventoryStatistics",
  created() {
    if (location.search) {
      this.isAddCode = true;
    }
    this.initData();
  },
  methods: {
    // 选中商品
    chooseInfo() {
      this.$router.push({
        path: "/goods_manager/codedIntoStorage",
        query: {
          id: 1
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleChange(value) {
      console.log(value);
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    //表单复选框
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    dialogFormVisibles() {
      this.dialogFormVisible = false;
      console.log(this.form);
      console.log(this.checkedCities);
    },
    initData() {
      selectMainAll()
        .then(res => {
          res.data.data.forEach(item => {
            this.goodsList.push(item);
          });
          this.total = this.goodsList.length;
        })
        .catch(err => {
          console.log(err);
        });
      // selectFenAll()
      //   .then(res => {
      //     res.data.data.forEach(item => {
      //       this.goodsList.push(item);
      //     });
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    }
  },
  data() {
    return {
      //分页当前页
      isAddCode: false,
      total: 10,

      dialogFormVisible: false,
      //输入框
      form: {
        inputDanjubianhao: "",
        inputShangpinbanma: "",
        inputShangpinmingcheng: "",
        inputShoucun: "",
        inputMojuhao: "",
        inputZuanhao: "",
        inputZhengshubianhao: "",

        form_jingdu: "",
        form_yanse: "",
        form_mendianmingcheng: "",
        form_laiyuan: "",
        form_pinpai: "",
        form_jiageleixing: "",
        form_zhubaofenlei: "",
        form_shangpinleixing: "",
        num_a1: 1, //范围
        num_a2: 100,
        num_b1: 1,
        num_b2: 10,
        num_c1: 1,
        num_c2: 20,
        num_d1: 1,
        num_d2: 2,
        formInline: {
          kuanshi: "",
          chengse: "",
          shuxing: "",
          zhushi: ""
        },
        checkedCities: []
      },

      visible: false,

      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,

      //选择商品类目

      goodsList: [
        {
          行号: 1, //id
          总部名称: 1, // 名称
          柜台名称: 1, // 商品数量
          首饰编码: 1, // 编码
          首饰名称: 1, // 电商款号
          含金量: 1, // 含金量
          金净重: 1, // 金净重
          主石重: 1, // 主石重
          副石重: 1, // 副石重
          总重: 1, // 总重
          成本单价: 1, // 成本单价
          系数: 1, // 系数
          标签单价: 1, // 标签单价
          标签金额: 1, // 标签总价
          销售工费: 1, // 销售工费
          销售公费计价: 1, // 销售附加费
          销售附加费: 1, // 价格类型
          价格类型: 1, // 证书号
          手寸: 1, // 手寸
          净度: 1, // 净度
          颜色: 1, // 颜色
          切工: 1, // 切工
          荧光: 1, // 荧光
          模具号: 1, // 模具号
          款号: 1, // 款号
          供应商: 1, // 供应商
          入库时间: 1, // 入库时间
          分类1: 1, // 分类1
          分类2: 1, // 分类2
          别名1: 1, // 别名1
          别名2: 1, // 别名2
          成色: 1, // 成色
          系列: 1, // 系列
          门店名称: 1, // 门店名称
          柜台: 1 // 柜台
        }
      ]
    };
  }
};
</script>


<style lang="sass">

</style>